<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="jakarta.faces.html"
      xmlns:f="jakarta.faces.core"
      xmlns:p="primefaces" 
      xmlns:pe="primefaces.extensions">

    <h:head>
        <h:outputStylesheet library="webjars" name="primeflex/3.3.1/primeflex.min.css" />     
    </h:head>

    <h:body style="margin: 0; padding: 0;">
        <p:growl showDetail="true">
            <p:autoUpdate/>
        </p:growl> 
        <h:form prependId="false">
            <pe:layout fullPage="true">
                <pe:layoutPane position="north" resizable="false" closable="false">
                    <div class="surface-section px-5 py-5">
                        <div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
                            <div>
                                <div class="font-medium text-3xl text-900">3 Stones.X Blogs</div>
                                <div class="flex align-items-center text-700 flex-wrap">
                                    <div class="mr-5 flex align-items-center mt-3">
                                        <i class="pi pi-users mr-2"/>
                                        <span>332 Active Users</span>
                                    </div>
                                    <div class="mr-5 flex align-items-center mt-3">
                                        <i class="pi pi-globe mr-2"/>
                                        <span>9402 Sessions</span>
                                    </div>
                                    <div class="flex align-items-center mt-3">
                                        <i class="pi pi-clock mr-2"/>
                                        <span>2.32m Avg. Duration</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 lg:mt-0">
                                <p:commandButton type="button" value="Add" icon="pi pi-user-plus"
                                                 styleClass="ui-button-outlined mr-2"/>
                                <p:commandButton type="button" value="Save" icon="pi pi-check"/>
                            </div>
                        </div>
                    </div>
                </pe:layoutPane>
                <pe:layoutPane position="west">
                    <div>
                        <p:orderList value="#{indexView.categories}"
                                     var="category"
                                     controlsLocation="none"
                                     itemLabel="#{category}"
                                     itemValue="#{category}">
                            <p:ajax event="select" listener="#{indexView.onSelect}" update="ds-blogs"/>
                        </p:orderList>
                    </div>
                </pe:layoutPane>
                <pe:layoutPane position="center">
                    <p:dataScroller id="ds-blogs" 
                                    value="#{indexView.blogs}" 
                                    var="blog"
                                    scrollHeight="500">
                        <div class="mb-1 px-2 py-2 w-auto">
                            <div class="font-medium text-xl text-900">#{blog.title}</div>
                            <div class="flex align-items-center text-700 flex-wrap">
                                <div class="mr-5 flex align-items-center mt-3">
                                    <i class="pi pi-user mr-2"/>
                                    <span>#{blog.user.username}</span>
                                </div>
                                <div class="mr-5 flex align-items-center mt-3">
                                    <i class="pi pi-bars mr-2"/>
                                    <span>#{blog.category}</span>
                                </div>
                                <div class="mr-5 flex align-items-center mt-3">
                                    <i class="pi pi-clock mr-2"/>
                                    <span>#{blog.publishTime}</span>
                                </div>
                                <div class="flex align-items-center mt-3">
                                    <i class="pi pi-comments mr-2"/>
                                    <span>#{blog.commentList.size()}</span>
                                </div>
                            </div>
                        </div>
                        <p:divider/>
                    </p:dataScroller>
                </pe:layoutPane>
                <pe:layoutPane position="south">
                    footer
                </pe:layoutPane>

            </pe:layout>
        </h:form>
    </h:body>
</html>